import React from 'react';
import { Button, message, Tooltip } from 'antd';
import List from './relationList';
import CommonListsIndex from '../../../../components/CommonLists/index';
import ComponentModal from '../../../Case/Check/Detail/componentModal';
import Modal from '../../../../components/Modal/index';
import services from '../../../../services/api';

class RelationComponent extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'policy';
    this.listsComponent = List;
    this.queryTableParams = {
      ...props.param
    };
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.detailComponent = '/strategy/component/id/detail';
  }
  componentDidMount() {
    this.freshQueryList();
  }

  // 列表
  queryList(params) {
    services[this.api].relationList(params).then(res => {
      if (res.code === 0) {
        const { list, totalCount } = res.data
        const currentPage = params.current_page
        const page = Math.ceil(totalCount / this.queryPanigation.page_size)
        if (list && totalCount && list.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current_page')
        } else {
          this.setState({
            ...res.data,
          });
        }
        // this.setState({
        //   ...res.data
        // });
      } else {
        message.error(res.msg);
      }
    });
  }

  // 关闭复制字段弹窗
  closeModal = () => {
    Modal.close();
    this.freshQueryList();
  };

  // 详情
  showDetail = (record) => {
    const i = Modal.open({
      title: '组件详情',
      width: '1200px',
      content: (
        <ComponentModal
          {...this.props}
          record={record}
          actionType={'detail'}
          afterSubmit={this.afterSubmit}
          model={false}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(i)
    });
  };

  // 打开新窗口、页面的id
  getOpenParam = (record) => {
    return record.strategy_id;
  };

  getColumns = () => {
    return [
      {
        title: '序号',
        key: 'strategy_id',
        dataIndex: 'strategy_id',
        width: 80,
        render: (text, record, index) => {
          return <>{index + 1}</>;
        }
      },
      {
        title: '组件名称',
        key: 'name',
        dataIndex: 'name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        }
      },
      {
        title: '所属渠道',
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return <>{text}</>;
        }
      },
      {
        title: '关联产品',
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return <>{text}</>;
        }
      },
      {
        title: '关联事件',
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text, record) => {
          return <>{text}</>;
        }
      },

      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        }
      }
    ];
  };

  clearSelected = () => {
    this.setState({
      field_ids: []
    });
  };

  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div className='inner-content' style={{ marginTop: '-15px', marginBottom: '30px' }}>
        <ListsComponent
          {...this.state}
          rowKey='strategy_id'
          edit={this.edit}
          queryList={this.freshQueryList}
          clearSelected={this.clearSelected}
          columns={this.getColumns()}
          onChangePagination={this.onChangePagination}
        />
      </div>
    );
  }
}

export default RelationComponent;
